import { h } from "vue";
import {
  createRouter,
  createWebHashHistory,
  createWebHistory,
} from "vue-router";
// import Home from "../views/Home.vue";
import Dashboard from "../views/Dashboard.vue";
import NotFound from "../components/NotFound.vue";

const routes = [
  {
    path: "/",
    name: "Dashboard",
    component: Dashboard,
  },
  {
    path: "/:pathMatch(.*)*", // 需要这样的路径参数 pathMatch 可以随便取名 (.*) 代表若干 * 代表必填项
    name: "not-fount",
    component: NotFound,
  },
];

const router = createRouter({
  // base 选项移至 方法内部
  history: createWebHashHistory(), // https://next.router.vuejs.org/zh/api/#createwebhashhistory
  // history: createWebHistory(), // https://next.router.vuejs.org/zh/api/#creatememoryhistory
  routes,
  scrollBehavior(to, from, savedPosition) {
    // [](https://next.router.vuejs.org/zh/guide/migration/#scrollbehavior-的变化)
    // 之前是： { x: 10, y: 10 } 现在 { left: 10, top: 10 } 原生的是 left 和 top
    if (savedPosition) {
      return savedPosition;
    } else {
      return { top: 0 };
    }
  },
});

// // 使用命名导航至 404 页面
// const { href } = router.resolve({
//   name: "not-found",
//   params: {
//     pathMatch: ["not", "found"],
//   },
// });

// console.log(href);
// 特性： 动态路由的增加
// router.addRoute 这种只能添加一个路由也就是第一个
// router.addRoute 再次调用添加的路由 名字和之前的有重复的话会把之前的覆盖掉
router.addRoute({
  path: "/about",
  name: "About",
  // route level code-splitting
  // this generates a separate chunk (about.[hash].js) for this route
  // which is lazy-loaded when the route is visited.
  component: () => import(/* webpackChunkName: "about" */ "../views/About.vue"),
});
router.addRoute("About", {
  path: "/about/info",
  name: "Info",
  component: {
    render() {
      return h("div", {}, "info page");
    },
  },
});
router.addRoute({
  path: "/todo-list",
  name: "TodoList",
  component: () =>
    import(/* webpackChunkName: "about" */ "../views/TodoList.vue"),
});
router.addRoute({
  path: "/indexed-db",
  name: "IndexedDB",
  component: () =>
    import(/* webpackChunkName: "indexed-db" */ "../views/IndexedDB.vue"),
});

export default router;
